<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色持久化测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            background: #f9f9f9;
        }
        .test-section h3 {
            margin-top: 0;
            color: #333;
        }
        .character-list {
            display: flex;
            gap: 10px;
            margin: 15px 0;
        }
        .character-btn {
            padding: 10px 15px;
            border: 2px solid #007bff;
            background: white;
            color: #007bff;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .character-btn:hover {
            background: #007bff;
            color: white;
        }
        .character-btn.active {
            background: #007bff;
            color: white;
        }
        .current-info {
            padding: 10px;
            background: #e9ecef;
            border-radius: 5px;
            margin: 10px 0;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
            font-weight: bold;
        }
        .status.success { background: #d4edda; color: #155724; }
        .status.info { background: #d1ecf1; color: #0c5460; }
        .status.warning { background: #fff3cd; color: #856404; }
        button {
            padding: 8px 16px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            background: #007bff;
            color: white;
        }
        button:hover {
            background: #0056b3;
        }
        .test-results {
            margin-top: 20px;
            padding: 15px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>角色持久化测试</h1>
    <p>这个页面用于测试角色选择的持久化功能，确保用户在刷新页面或重新访问时能回到最后选择的角色。</p>
    
    <div class="test-section">
        <h3>1. 角色选择测试</h3>
        <p>点击不同的角色按钮，观察当前角色的变化：</p>
        
        <div class="character-list">
            <button class="character-btn" data-id="1" onclick="selectCharacter(1)">哈利·波特</button>
            <button class="character-btn" data-id="2" onclick="selectCharacter(2)">苏格拉底</button>
            <button class="character-btn" data-id="3" onclick="selectCharacter(3)">爱因斯坦</button>
            <button class="character-btn" data-id="4" onclick="selectCharacter(4)">江户川柯南</button>
            <button class="character-btn" data-id="5" onclick="selectCharacter(5)">泰拉瑞亚向导</button>
        </div>
        
        <div class="current-info">
            <strong>当前选择的角色ID：</strong> <span id="currentCharacter">未选择</span>
        </div>
        
        <div class="current-info">
            <strong>localStorage中的角色ID：</strong> <span id="storedCharacter">未存储</span>
        </div>
    </div>
    
    <div class="test-section">
        <h3>2. 持久化测试</h3>
        <p>测试角色选择是否能正确保存和恢复：</p>
        
        <button onclick="saveCurrentCharacter()">保存当前角色</button>
        <button onclick="loadStoredCharacter()">加载存储的角色</button>
        <button onclick="clearStoredCharacter()">清除存储的角色</button>
        <button onclick="refreshPage()">刷新页面测试</button>
        
        <div id="testStatus" class="status info">请选择一个角色开始测试</div>
    </div>
    
    <div class="test-section">
        <h3>3. 路由重定向测试</h3>
        <p>测试不同路由的重定向行为：</p>
        
        <button onclick="testRootRedirect()">测试根路径重定向</button>
        <button onclick="test404Redirect()">测试404重定向</button>
        <button onclick="testLoginRedirect()">测试登录后重定向</button>
        
        <div class="test-results">
            <h4>测试结果：</h4>
            <ul id="testResults"></ul>
        </div>
    </div>
    
    <script>
        let currentCharacterId = null;
        
        // 页面加载时初始化
        window.onload = function() {
            loadStoredCharacter();
            updateDisplay();
        };
        
        // 选择角色
        function selectCharacter(characterId) {
            currentCharacterId = characterId;
            
            // 更新按钮状态
            document.querySelectorAll('.character-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            document.querySelector(`[data-id="${characterId}"]`).classList.add('active');
            
            // 保存到 localStorage
            localStorage.setItem('LAST_CHARACTER_ID', characterId.toString());
            
            updateDisplay();
            
            document.getElementById('testStatus').className = 'status success';
            document.getElementById('testStatus').textContent = `已选择角色 ${characterId} 并保存到 localStorage`;
        }
        
        // 更新显示
        function updateDisplay() {
            document.getElementById('currentCharacter').textContent = currentCharacterId || '未选择';
            
            const stored = localStorage.getItem('LAST_CHARACTER_ID');
            document.getElementById('storedCharacter').textContent = stored || '未存储';
        }
        
        // 保存当前角色
        function saveCurrentCharacter() {
            if (currentCharacterId) {
                localStorage.setItem('LAST_CHARACTER_ID', currentCharacterId.toString());
                updateDisplay();
                
                document.getElementById('testStatus').className = 'status success';
                document.getElementById('testStatus').textContent = `角色 ${currentCharacterId} 已保存到 localStorage`;
            } else {
                document.getElementById('testStatus').className = 'status warning';
                document.getElementById('testStatus').textContent = '请先选择一个角色';
            }
        }
        
        // 加载存储的角色
        function loadStoredCharacter() {
            const stored = localStorage.getItem('LAST_CHARACTER_ID');
            if (stored) {
                const characterId = Number(stored);
                selectCharacter(characterId);
                
                document.getElementById('testStatus').className = 'status success';
                document.getElementById('testStatus').textContent = `已从 localStorage 加载角色 ${characterId}`;
            } else {
                document.getElementById('testStatus').className = 'status info';
                document.getElementById('testStatus').textContent = 'localStorage 中没有存储的角色';
            }
        }
        
        // 清除存储的角色
        function clearStoredCharacter() {
            localStorage.removeItem('LAST_CHARACTER_ID');
            currentCharacterId = null;
            
            document.querySelectorAll('.character-btn').forEach(btn => {
                btn.classList.remove('active');
            });
            
            updateDisplay();
            
            document.getElementById('testStatus').className = 'status info';
            document.getElementById('testStatus').textContent = '已清除存储的角色';
        }
        
        // 刷新页面
        function refreshPage() {
            window.location.reload();
        }
        
        // 添加测试结果
        function addTestResult(message, success = true) {
            const results = document.getElementById('testResults');
            const li = document.createElement('li');
            li.textContent = message;
            li.style.color = success ? 'green' : 'red';
            li.style.marginBottom = '5px';
            results.appendChild(li);
        }
        
        // 测试根路径重定向
        function testRootRedirect() {
            const stored = localStorage.getItem('LAST_CHARACTER_ID');
            if (stored) {
                addTestResult(`✓ 根路径应重定向到 /chat/${stored}`);
                addTestResult(`模拟测试：访问 / 会重定向到 /chat/${stored}`);
            } else {
                addTestResult(`✓ 根路径应重定向到 /chat/1 (默认)`);
                addTestResult(`模拟测试：访问 / 会重定向到 /chat/1`);
            }
        }
        
        // 测试404重定向
        function test404Redirect() {
            const stored = localStorage.getItem('LAST_CHARACTER_ID');
            if (stored) {
                addTestResult(`✓ 404页面应重定向到 /chat/${stored}`);
                addTestResult(`模拟测试：访问不存在的路径会重定向到 /chat/${stored}`);
            } else {
                addTestResult(`✓ 404页面应重定向到 /chat/1 (默认)`);
                addTestResult(`模拟测试：访问不存在的路径会重定向到 /chat/1`);
            }
        }
        
        // 测试登录后重定向
        function testLoginRedirect() {
            const stored = localStorage.getItem('LAST_CHARACTER_ID');
            if (stored) {
                addTestResult(`✓ 登录后应重定向到 /chat/${stored}`);
                addTestResult(`模拟测试：登录成功后会跳转到 /chat/${stored}`);
            } else {
                addTestResult(`✓ 登录后应重定向到 /chat/1 (默认)`);
                addTestResult(`模拟测试：登录成功后会跳转到 /chat/1`);
            }
        }
    </script>
</body>
</html>
